<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .dropDown{width: 200px;height: 40px;line-height: 40px;margin: 20px auto;}
    .dropDown span{display: block;border: solid 1px black;}
    .dropDown .list{margin: 0;padding: 0;list-style: none;border: solid 1px black;border-top:none;text-indent: 4px;display: none;}
  </style>
</head>
<body>

  <select>
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">深圳</option>
    <option value="">广州</option>
    <option value="">杭州</option>
    <option value="">南京</option>
  </select>

  <div class="dropDown">
    <span>北京</span>
    <ul class="list">
      <li>北京</li>
      <li>上海</li>
      <li>深圳</li>
      <li>广州</li>
      <li>杭州</li>
      <li>南京</li>
    </ul>
  </div>

</body>
<script>

  var span = document.querySelector(".dropDown span");
  var list = document.querySelector(".dropDown .list");

  // 记录下拉菜单的显示状态：true要显示，false要隐藏
  var onoff = true;

  // 绑定事件
  span.addEventListener("click", function( eve ){
    var e = eve || window.event;
    // 阻止事件冒泡
    e.stopPropagation();
    // 根据状态，决定显示或隐藏，同步状态
    if(onoff){
      list.style.display = "block";
      onoff = false;
    }else{
      list.style.display = "none";
      onoff = true;
    }
  })

  // 点击文档的任何区域，隐藏下拉菜单，同步状态
  document.onclick = function(){
    list.style.display = "none";
    onoff = true;
  }
  
  
</script>
</html>